<template>
	<div class="ShoppingCartHome">
		<!--分页工具条-->
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page.sync="currentPage4" :page-sizes="[5, 10,15,20]" :page-size="pageSize"
			layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
		</el-pagination>
		<el-table :data="bookList" style="width: 100%" @selection-change="handleSelectionChange"
			:row-class-name="tableRowClassName" align="center" :cell-class-name="cellRowClassName">
			<el-table-column prop="buy_id" label="订单编号" width="100" style="text-align: center;" align="center"
				header-align="center"></el-table-column>
			<el-table-column label="图片" width="" align="center" header-align="center">
				<template v-slot="scope">
					<el-image style="width: 100px; height: 100px"
						:src="require('@/assets/img/'+scope.row.book_pic+'.jpg')" />
				</template>
			</el-table-column>
			<el-table-column prop="bid" label="书本ID" width="180" align="center" header-align="center"></el-table-column>
			<el-table-column prop="book_name" label="书本名称" align="center" header-align="center"></el-table-column>
			<el-table-column prop="book_balance" sortable label="原价" align="center" header-align="center">
			</el-table-column>
			<el-table-column prop="book_membalance" sortable label="当前价格" align="center" header-align="center">
			</el-table-column>
			<el-table-column align="center" label="操作" width="160px" v-slot="scope" header-align="center">
				<el-row>
					<el-button type="primary" @click="buymsg(scope.$index,scope.row)">购买</el-button>
					<el-button type="danger" @click="removemsg(scope.$index,scope.row)">删除</el-button>
				</el-row>
			</el-table-column>
		</el-table>
		<el-button slot="reference" @click="Buy()">付款</el-button>
	</div>
</template>

<script>
	import axios from 'axios'
	export default {
		data() {
			return {
				bookList: [],
				pageSize: 10,
				// 总记录数
				totalCount: 0,
				// 当前页码
				currentPage: 1,
			};
		},
		created() {
			this.findByPages();
		},
		methods: {
			getSummaries(param) {
				const {
					columns,
					data
				} = param;
				const sums = [];
				columns.forEach((column, index) => {
					if (index === 0) {
						sums[index] = '总价';
						return;
					}
					const values = data.map(item => Number(item[column.property]));
					if (!values.every(value => isNaN(value))) {
						sums[index] = values.reduce((prev, curr) => {
							const value = Number(curr);
							if (!isNaN(value)) {
								return prev + curr;
							} else {
								return prev;
							}
						}, 0);
						sums[index] += ' 元';
					} else {
						sums[index] = 'N/A';
					}
				});

				return sums;
			},
			lookbookcart() {
				var _this = this;
				axios.post('http://localhost:8080/bookcar/findallbookcar')
					.then(res => {
						_this.bookList = res.data; //响应数据给bookList赋值
					})
					.catch(function(error) {
						console.log(error);
					});
			},
			findByPages() {
				var _this = this;
				axios({
					method: "post",
					url: "http://localhost:8080/bookcar/selectbypage?currentPage=" + this
						.currentPage + "&pageSize=" + this.pageSize,
				}).then(res => {
					//设置表格数据
					_this.bookList = res.data.rows; // {rows:[],totalCount:100}
					//设置总记录数
					this.totalCount = res.data.totalCount;
				})
			},
			tableRowClassName({
				row,
				rowIndex
			}) {
				row.row_index = rowIndex;
			},
			//分页
			handleSizeChange(val) {
				//console.log(`每页 ${val} 条`);
				// 重新设置每页显示的条数
				this.pageSize = val;
				this.findByPages();
			},
			handleCurrentChange(val) {
				//console.log(`当前页: ${val}`);
				// 重新设置当前页码
				this.currentPage = val;
				this.findByPages();
			},
			tableRowClassName({
				row,
				rowIndex
			}) {
				row.row_index = rowIndex;
			},
			buymsg(index, row) {
				this.currentRowIndex = row.row_index;
				this.buy_id = this.bookList[this.currentRowIndex].buy_id;
				this.$confirm('是否购买该图书, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					axios.post('http://localhost:8080/bookcar/buybook', 'buy_id=' + this.buy_id)
						.then(res => {
							if (res.data == "success") {
								this.$message({
									type: 'success',
									message: '恭喜您购买成功!',
									
								});
								this.findByPages();
							} else {
								this.$message({
									type: 'warning',
									message: res.data
								});
							}
						})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消购买'
					});
				});
			},
			removemsg(index, row) {
				this.currentRowIndex = row.row_index;
				this.buy_id = this.bookList[this.currentRowIndex].buy_id;
				this.$confirm('是否将该图书移除购物车?', '提示', {
					confirmButtonText: '是',
					cancelButtonText: '否',
					type: 'warning'
				}).then(() => {
					axios.post('http://localhost:8080/bookcar/deleteinfo', 'buy_id=' + this.buy_id)
						.then(res => {
							if (res.data = "success") {
								this.$message({
									type: 'success',
									message: '恭喜您删除成功!'
								});
								this.lookbookcart()
							} else {
								this.$message({
									type: 'warning',
									message: res.data
								});
							}
						})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			Buy() {
				this.$confirm('是否结清购物车?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
					center: true
				}).then(() => {
					// 发送ajax请求，添加数据x
					axios({
						method: "post",
						url: "http://localhost:8080/bookcar/deleteAllinfo",
					}).then(res => {
						if (res.data == "success") {
							// 弹出消息提示
							this.lookbookcart()
							this.$message({
								message: '恭喜你，支付成功',
								type: 'success'
							});
						}
					})
				}).catch(() => {
					//用户点击取消按钮
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});

			},
			cellRowClassName({
				column,
				columnIndex
			}) {
				if (columnIndex === 4) {
					return 'pricebook';
				}
				return '';
			},
		}
	};
</script>

<style>
	.ShoppingCartHome {
		width: 910px;
		margin-top: 40px;
		margin-left: 20px;
	}

	.el-table .pricebook {
		color: red;
		text-decoration: line-through;
	}
</style>
